<template>
	<view>
		<view class="tabs">

			<!-- 一级菜单 -->
			<u-tabs scrollable :lineWidth="0" :activeStyle="firstActiveStyle" :inactiveStyle="firstInactiveStyle"
				:list="firstList" @click="firstTabClick" :current="firstActive"></u-tabs>

			<!-- 二级菜单 -->
			<u-tabs scrollable :lineWidth="0" :activeStyle="secondActiveStyle" :inactiveStyle="secondInactiveStyle"
				:list="secondList" @click="secondTabClick" :current="secondActive"></u-tabs>
		</view>

		<!-- 主体内容 -->
		<swiper class="swiper" :current="firstActive" :duration="300"
				:disable-programmatic-animation="true" @change="onSwiperChange">
			<swiper-item class="swiper_item" v-for="(item, index) in firstList" :key="index">
				<scroll-view class="main" scroll-y @scrolltolower="scrolltolower" :lower-threshold="500">
					<view class="main-list">
						<view class="list">
							<view class="list_item" v-for="item, index in leftList" :key="index" @click="goDetails(item)">
								<image class="model_img" :src="item.images[0]" mode="widthFix" />
								<view class="model_title">{{ item.title }}</view>
							</view>
						</view>
						<view class="list">
							<view class="list_item" v-for="item, index in rightList" :key="index" @click="goDetails(item)">
								<image class="model_img" :src="item.images[0]" mode="widthFix" />
								<view class="model_title">{{ item.title }}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script type="text/javascript" src="plus-confusion://../pages/model/graduate/index"></script>

<style lang="scss" scoped>
.tabs {
	position: fixed;
	top: 0rpx;
	left: 0;
	padding: 0 32rpx;
	width: 100vw;
	box-sizing: border-box;
	z-index: 999;
	background: #fff;
}

.swiper {
	height: 100vh;
}

.main {
	z-index: 990;
	margin-top: 180rpx;
	background: #f8f8f8;
	height: calc(100vh - 180rpx);
	box-sizing: border-box;


	.main-list {
		display: flex;
		justify-content: space-around;
		padding: 0 10rpx;
	}

	.list {
		padding-top: 40rpx;
		width: 330rpx;
		box-sizing: border-box;


		.list_item {


			margin-bottom: 30rpx;
			width: 330rpx;
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;

			.model_img {
				display: inline-block;
				width: 100%;
			}

			.model_title {
				padding: 26rpx 24rpx;
				text-align: center;
				background: #fff;
				white-space: nowrap;
				/* 防止自动换行 */
				overflow: hidden;
				/* 隐藏超出部分 */
				text-overflow: ellipsis;
				/* 超出部分显示省略号 */
			}
		}
	}
}
</style>